<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品推荐 - SocialMart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #e0e7ff;
            --secondary: #ec4899;
            --secondary-light: #fee2e2;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --border-color: #cbd5e1;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-bar {
            max-width: 500px;
            width: 100%;
        }
        
        .search-input {
            background-color: #f1f5f9;
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            width: 100%;
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            margin-left: 1rem;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
        }
        
        /* 分类导航 */
        .category-nav {
            background-color: white;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .category-item {
            display: inline-block;
            margin: 0 0.75rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--gray);
        }
        
        .category-item:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 布局切换器 */
        .view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }
        
        .view-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .sort-select {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
        
        /* 商品卡片通用样式 */
        .product-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        
        .product-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .product-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .product-actions {
            display: flex;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .action-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        
        .like-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            color: var(--dark);
        }
        
        .like-btn:hover, .like-btn.liked {
            background-color: var(--secondary-light);
            color: var(--secondary);
            border-color: var(--secondary);
        }
        
        .save-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            color: var(--dark);
        }
        
        .save-btn:hover, .save-btn.saved {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }
        
        .comment-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            color: var(--dark);
        }
        
        .comment-btn:hover {
            background-color: var(--light-gray);
        }
        
        /* 网格布局 - 小卡片 */
        .grid-small {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .product-image-container {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: #f1f5f9;
            overflow: hidden;
        }
        
        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .product-card:hover .product-image {
            transform: scale(1.05);
        }
        
        .image-count {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .no-image {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--gray);
            background-color: #f1f5f9;
        }
        
        .no-image i {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        
        .product-info {
            padding: 1rem;
        }
        
        .product-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 44px;
        }
        
        .product-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .product-price {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        /* 网格布局 - 大图卡片 */
        .grid-large {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 2rem;
        }
        
        .grid-large .product-image-container {
            height: 280px;
        }
        
        .grid-large .product-info {
            padding: 1.25rem;
        }
        
        .grid-large .product-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            height: auto;
            -webkit-line-clamp: 3;
        }
        
        .grid-large .product-desc {
            margin-bottom: 1rem;
            -webkit-line-clamp: 3;
        }
        
        /* 列表布局 */
        .list-view .product-card {
            display: flex;
            margin-bottom: 1.5rem;
        }
        
        .list-view .product-image-container {
            width: 220px;
            height: 220px;
            flex-shrink: 0;
        }
        
        .list-view .product-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .product-info {
            flex: 1;
            padding: 1.25rem;
        }
        
        .list-view .product-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            height: auto;
            -webkit-line-clamp: 2;
        }
        
        .list-view .product-desc {
            margin-bottom: 1rem;
            -webkit-line-clamp: 3;
        }
        
        .list-view .product-author {
            border-bottom: none;
            padding: 1.25rem 1.25rem 0;
        }
        
        .list-view .product-actions {
            border-top: none;
            padding: 0 1.25rem 1.25rem;
        }
        
        /* 瀑布流布局 */
        .masonry-view {
            column-count: 1;
            column-gap: 1.5rem;
        }
        
        @media (min-width: 768px) {
            .masonry-view {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .masonry-view {
                column-count: 3;
            }
        }
        
        .masonry-view .product-card {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }
        
        .masonry-view .product-image-container {
            height: auto;
        }
        
        .masonry-view .tall-image {
            height: 400px;
        }
        
        .masonry-view .medium-image {
            height: 300px;
        }
        
        .masonry-view .short-image {
            height: 200px;
        }
        
        /* 多图展示样式 */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 2px;
            height: 100%;
        }
        
        .image-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-grid .more-images {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
            background-color: rgba(0,0,0,0.6);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-large {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
            
            .list-view .product-image-container {
                width: 180px;
                height: 180px;
            }
        }
        
        @media (max-width: 768px) {
            .search-bar {
                max-width: 200px;
            }
            
            .category-item {
                margin: 0 0.5rem;
                padding: 0.4rem 0.8rem;
                font-size: 0.9rem;
            }
            
            .list-view .product-card {
                flex-direction: column;
            }
            
            .list-view .product-image-container {
                width: 100%;
                height: 200px;
            }
            
            .action-btn span {
                display: none;
            }
            
            .action-btn {
                justify-content: center;
                padding: 0.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .search-bar {
                display: none;
            }
            
            .grid-small, .grid-large {
                grid-template-columns: 1fr;
            }
            
            .view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-shopping-bag"></i>
                SocialMart
            </a>
            
            <div class="search-bar mx-3">
                <input type="text" class="search-input" placeholder="搜索商品、品牌或用户...">
            </div>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-home me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="fas fa-compass me-1"></i>发现
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-bell me-1"></i>通知
                        </a>
                    </li>
                    <li class="nav-item ms-2">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="avatar">
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 分类导航 -->
    <div class="category-nav">
        <div class="container">
            <div class="category-item active">全部商品</div>
            <div class="category-item">电子产品</div>
            <div class="category-item">服装鞋帽</div>
            <div class="category-item">家居用品</div>
            <div class="category-item">美妆护肤</div>
            <div class="category-item">图书文具</div>
            <div class="category-item">运动户外</div>
            <div class="category-item">美食特产</div>
            <div class="category-item">玩具乐器</div>
            <div class="category-item">手工制品</div>
            <div class="category-item">其他</div>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container py-4">
        <!-- 布局控制和排序 -->
        <div class="view-controls">
            <div class="view-buttons">
                <button class="view-btn active" data-view="grid-small" title="网格小卡片">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" data-view="grid-large" title="网格大卡片">
                    <i class="fas fa-th-large"></i>
                </button>
                <button class="view-btn" data-view="list-view" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" data-view="masonry-view" title="瀑布流视图">
                    <i class="fas fa-th-large"></i>
                </button>
            </div>
            
            <select class="sort-select">
                <option value="recommended">推荐排序</option>
                <option value="latest">最新发布</option>
                <option value="popular">最受欢迎</option>
                <option value="price-low">价格从低到高</option>
                <option value="price-high">价格从高到低</option>
            </select>
        </div>
        
        <!-- 商品推荐区 - 默认网格小卡片布局 -->
        <div class="products-container grid-small">
            <!-- 商品1 - 单张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="author-avatar">
                    <span class="author-name">创意家居坊</span>
                </div>
                
                <div class="product-image-container">
                    <img src="https://picsum.photos/600/400?random=20" alt="北欧风格简约台灯" class="product-image">
                    <div class="image-count">1</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">北欧风格简约台灯 卧室床头灯创意现代简约温馨浪漫调光灯具</h3>
                    <p class="product-desc">采用环保ABS材质，LED节能光源，三档调光，适用于卧室、书房等多种场景。</p>
                    <div class="product-price">¥129.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.4k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>136</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>528</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品2 - 多张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="author-avatar">
                    <span class="author-name">时尚穿搭达人</span>
                </div>
                
                <div class="product-image-container">
                    <div class="image-grid">
                        <img src="https://picsum.photos/300/300?random=21" alt="休闲牛仔裤正面" class="product-image">
                        <img src="https://picsum.photos/300/300?random=22" alt="休闲牛仔裤侧面" class="product-image">
                        <img src="https://picsum.photos/300/300?random=23" alt="休闲牛仔裤细节" class="product-image">
                        <div class="more-images">+2</div>
                    </div>
                    <div class="image-count">5</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">秋季新款直筒牛仔裤 宽松显瘦百搭休闲长裤</h3>
                    <p class="product-desc">优质棉弹面料，舒适透气，多色可选，适合各种身材，百搭时尚。</p>
                    <div class="product-price">¥189.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>5.7k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>328</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>1254</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品3 - 无图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=12" alt="用户头像" class="author-avatar">
                    <span class="author-name">手工艺术品</span>
                </div>
                
                <div class="product-image-container">
                    <div class="no-image">
                        <i class="fas fa-paint-brush"></i>
                        <div>暂无图片</div>
                    </div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">定制手绘肖像画 真人照片转手绘油画 生日礼物</h3>
                    <p class="product-desc">根据照片定制手绘肖像，多种风格可选，尺寸可定制，是独特的礼物选择。</p>
                    <div class="product-price">¥299.00 起</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.8k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>97</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>342</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品4 - 单张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=13" alt="用户头像" class="author-avatar">
                    <span class="author-name">数码科技港</span>
                </div>
                
                <div class="product-image-container">
                    <img src="https://picsum.photos/600/400?random=24" alt="无线蓝牙耳机" class="product-image">
                    <div class="image-count">1</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">无线蓝牙耳机 主动降噪 长续航 高清通话 运动耳机</h3>
                    <p class="product-desc">ANC主动降噪，40小时长续航，IPX7防水，高清音质，舒适佩戴。</p>
                    <div class="product-price">¥399.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>8.2k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>543</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>2156</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品5 - 多张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=14" alt="用户头像" class="author-avatar">
                    <span class="author-name">美食分享家</span>
                </div>
                
                <div class="product-image-container">
                    <div class="image-grid">
                        <img src="https://picsum.photos/300/300?random=25" alt="手工曲奇饼干包装" class="product-image">
                        <img src="https://picsum.photos/300/300?random=26" alt="手工曲奇饼干细节" class="product-image">
                        <div class="more-images">+1</div>
                    </div>
                    <div class="image-count">3</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">手工曲奇饼干礼盒 黄油曲奇 进口原料 送礼佳品</h3>
                    <p class="product-desc">纯手工制作，进口黄油原料，无添加剂，多种口味组合，精美礼盒包装。</p>
                    <div class="product-price">¥88.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>3.5k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>217</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>892</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品6 - 单张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=15" alt="用户头像" class="author-avatar">
                    <span class="author-name">运动装备库</span>
                </div>
                
                <div class="product-image-container">
                    <img src="https://picsum.photos/600/400?random=27" alt="瑜伽垫" class="product-image">
                    <div class="image-count">1</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">专业防滑瑜伽垫 加厚加宽 环保无味 健身垫</h3>
                    <p class="product-desc">10mm加厚设计，TPE环保材质，防滑耐磨，多种尺寸和颜色可选。</p>
                    <div class="product-price">¥159.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.1k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>143</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>487</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品7 - 无图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=16" alt="用户头像" class="author-avatar">
                    <span class="author-name">知识书屋</span>
                </div>
                
                <div class="product-image-container">
                    <div class="no-image">
                        <i class="fas fa-book"></i>
                        <div>暂无图片</div>
                    </div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">《影响力》精装珍藏版 心理学经典著作 畅销书</h3>
                    <p class="product-desc">罗伯特·西奥迪尼经典著作，解析人类行为背后的6大心理原则，精装珍藏版。</p>
                    <div class="product-price">¥59.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>4.3k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>321</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>1056</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品8 - 多张图片 -->
            <div class="product-card">
                <div class="product-author">
                    <img src="https://picsum.photos/100/100?random=17" alt="用户头像" class="author-avatar">
                    <span class="author-name">美妆护肤馆</span>
                </div>
                
                <div class="product-image-container">
                    <div class="image-grid">
                        <img src="https://picsum.photos/300/300?random=28" alt="保湿面霜包装" class="product-image">
                        <img src="https://picsum.photos/300/300?random=29" alt="保湿面霜质地" class="product-image">
                        <img src="https://picsum.photos/300/300?random=30" alt="保湿面霜使用效果" class="product-image">
                        <div class="more-images">+3</div>
                    </div>
                    <div class="image-count">6</div>
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">天然植物保湿面霜 补水滋润 敏感肌适用 50ml</h3>
                    <p class="product-desc">天然植物萃取成分，无香精酒精，深层补水保湿，适合各种肤质，尤其敏感肌。</p>
                    <div class="product-price">¥239.00</div>
                    
                    <div class="product-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>6.7k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>489</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>1876</span>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>喜欢</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const viewButtons = document.querySelectorAll('.view-btn');
            const productsContainer = document.querySelector('.products-container');
            
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的active类
                    viewButtons.forEach(btn => btn.classList.remove('active'));
                    // 给当前点击的按钮添加active类
                    this.classList.add('active');
                    
                    // 移除所有布局类
                    productsContainer.classList.remove('grid-small', 'grid-large', 'list-view', 'masonry-view');
                    // 添加当前选择的布局类
                    productsContainer.classList.add(this.getAttribute('data-view'));
                });
            });
            
            // 分类切换功能
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加分类筛选逻辑
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.save-btn');
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
            });
            
            // 评论按钮功能
            const commentButtons = document.querySelectorAll('.comment-btn');
            commentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const productTitle = this.closest('.product-card').querySelector('.product-title').textContent;
                    alert(`打开 "${productTitle}" 的评论区`);
                });
            });
        });
    </script>
</body>
</html>
    
